<template>
    <div id="app">
        <h1 @click="$store.commit('add', 10)">{{$store.state.count}}</h1>
        <h1 @click="$store.dispatch('add', 10)">async: {{$store.state.count}}</h1>
        <div class="link-box">
            <router-link class="link-item" to="/">首页</router-link>
            <router-link class="link-item" to="/other">其他页面</router-link>
        </div>
        <router-view/>
    </div>
</template>

<script>
    export default {
        name: 'App',
        mounted(){

        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

    .link-box{
        margin-bottom: 80px;
    }

    .link-box .link-item {
        font-size: 20px;
        margin-right: 40px;
    }
</style>
